
<!DOCTYPE html>
<html>
  <head>
   <title>Tlink物联网-监控中心,TLINK物联网-中国最大的物联网开放平台</title>
    <meta name="Keywords" content="TLINK|物联网|智能物联|数字农业|仪器仪表物联网|物联网平台|物联网云服务|物联网开放平台|物联网技术|物联网应用|传感器云平台|环境物联网|能源物联网"  />
    <meta name="Description" content="TLINK物联网是深圳市模拟科技有限公司面向物联网产品的开放平台" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    




<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="icon" href="/images/favicon.ico">
<script src="/js/device/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/js/device/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/device/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/device/jquery.datetimepicker.css">
<link rel="stylesheet" type="text/css" href="/css/device/myIndex.css">
<link rel="stylesheet" type="text/css" href="/css/device/style.min.css">
<script type="text/javascript" src="/js/device/jquery-form.js"></script>
<script type="text/javascript" src="../js/device/jquery_ujs.js"></script>
<script type="text/javascript" src="../js/device/jquery.js"></script>
<script type="text/javascript" src="/js/device/navbar.js"></script>
<script type="text/javascript" src="/js/device/jquery.datetimepicker.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?cab9d2db73648c24a142c1d8df07c285";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script> 
    <link rel="stylesheet" type="text/css" href="/css/device/daterangepicker-bs3.css">
    <script type="text/javascript" src="/js/device/moment.min.js"></script>
    <script type="text/javascript" src="/js/device/daterangepicker.js"></script>
    <script type="text/javascript">
     
     $(document).ready(function(){
	      Date.prototype.Format = function(fmt){ 
			var o = {   
			"M+" : this.getMonth()+1,                 //月份   
			"d+" : this.getDate(),                    //日   
			"h+" : this.getHours(),                   //小时   
			"m+" : this.getMinutes(),                 //分   
			"s+" : this.getSeconds(),                 //秒   
			"q+" : Math.floor((this.getMonth()+3)/3), //季度   
			"S"  : this.getMilliseconds()             //毫秒   
			};   
			if(/(y+)/.test(fmt))   
			fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
			for(var k in o)   
				if(new RegExp("("+ k +")").test(fmt))   
					fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
			return fmt;
		 } 
	
		var $historyContent = $("#historyDataContent");
		var $historyTable = $('#historyDataTable');
		var dataArr = new Array();
		var $chart = $("<div>").attr("id","sensorChart");
		
		var sensorNameG = $("#sensorNameG").val();
		var sensorUnitG = $("#sensorUnitG").val();
		
		// 初始化图标
		var endTime = new Date().Format("yyyy-MM-dd");
		var startTime = endTime;
		$("#reservation").val(startTime + " - " + endTime);
	        loadTableData(1,startTime,endTime);
		
		//点搜索查询
		//var searBtn = document.getElementById("sensorDataForm");
	    $('#sensorDataForm').click(function(e){
	    	//searBtn.disabled = true;
	    	e.preventDefault();
	    	var startTime = $("#daterangepicker_start").val();
	    	var endTime = $("#daterangepicker_end").val();
	    	if(startTime== "" || endTime == ""){
	    		return;
	    	}
	    	loadTableData(1,startTime,endTime);
	    });
     })
     
    //加载历史数据列表
	function loadTableData(page,startTime,endTime){
		var basePath=$("#basePath").val();
               basePath=basePath.replace(/(\/*$)/g, "");
		var sensorId = $("#sensorId").val();
		 //$.ajax({url:basePath+"/pgetsensorlogsdetail?sensorId="+sensorId+"&page="+page+"&startTime="+startTime+"&endTime="+endTime, 
		 $.ajax({url:basePath+"/querySensorDataDetail", 
                type:"POST",
                async:true,
                timeout : 600000,
                data:{
                sensorId:sensorId,
                page:page,
                startTime:startTime,
                endTime:endTime},
          success:function (data){
	       //$("#sensorDataForm").attr("disabled","false");
	        //var jsonData =  data;
                //data=data.replace(/(^\s*)|(\s*$)/g, "");
                //data=data.replace(/(^\"*)|(\"*$)/g, "");
                //data=data.replace(/(^\"*)|(\"*$)/g, "");
	        var jsonData =  data;
			if(jsonData.code == 0){
				$('#historyDataTable').empty();
				if(jsonData.dataList.length > 0){
					var html = '<table class="table table-bordered"><tr class="table_header"><td>数据</td><td>更新时间</td></tr>';
					for(var i = 0;i < jsonData.dataList.length;i++){
						var val = "";
						/*if(jsonData.dataList[i].t_sensorTypeId == "1"){
							val = jsonData.dataList[i].t_val;
						}else if(jsonData.dataList[i].t_sensorTypeId == "2"){  //开关型
							val = jsonData.dataList[i].t_switcher;
						}else if(jsonData.dataList[i].t_sensorTypeId == "4"){  //图片型
						   	val = "<img src='"+jsonData.dataList[i].t_val+"' width='30px' height='30px' onclick='attrImg(this)' style='cursor: hand'  />";
						}*/
                                                if(jsonData.sensor.sensorType!=1 &&jsonData.dataList[i].tag){
                                                       val=jsonData.dataList[i].tag;
                                                }
						if(val == ""){
							val = jsonData.dataList[i].value;
						}
                                                var date2 = new Date(jsonData.dataList[i].time);
						html += '<tr><td>' + val + '</td><td>' + date2.Format("yyyy-MM-dd hh:mm:ss") + '</td></tr>';
						//html += '<tr><td>' + val + '</td><td>' + jsonData.dataList[i].time + '</td></tr>';
					}
					html += '</table>';
					$('#historyDataTable').append(html);
					$("#pagination").html(generateTablePagination(parseInt(jsonData.page),parseInt(jsonData.totalPage),startTime,endTime));
				}		
			}else if(jsonData.flag == "08"){
				alert("查询区间必须小于等于1个月");
				return false;
			}else{
			   $('#historyDataTable').html("未查询到相关数据！");
			}	
		  }});	
	}

	//分页
	function generateTablePagination(page,totalPage,startTime,endTime){
		if(totalPage > 0){
			var $wraper = $("<ul>").addClass('pagination');
			
			var pageHtml = '';
			pageHtml += '<li data-index="1"><a href="#" type="button">首页</a></li>';//到首页
			if(page > 1){			
				pageHtml += '<li data-index="'+ (page - 1) +'"><a href="#" type="button">上一页</a></li>';//到上一页
			}
			var beginPage = page - 3 < 1 ? 1 : page - 3;
			if (beginPage <= totalPage) {
				var i = beginPage;
				for (var j = 0; (i <= totalPage) && (j < 6); j=j+1) {
					if (i == page) {
						pageHtml = pageHtml + "<li data-index="+i+"><a href='#' type='button'><font color='red'>"+i+"</font></a></li> ";
					} else {
						pageHtml = pageHtml + "<li data-index="+i+"><a href='#' type='button'>"+i+"</a></li> ";
					}
					i=i+1;
				}
			}
			if(page < totalPage){
				pageHtml += '<li data-index="'+ (page + 1) +'"><a href="#" type="button">下一页</a></li>';//到末页			
			}
			pageHtml += '<li data-index="'+ totalPage +'"><a href="#" type="button">末页</a></li>';//到末页
			$wraper.append(pageHtml);
			
			$wraper.find('li').click(function(){
				var index = $(this).data('index');		
				loadTableData(index,startTime,endTime);
			})

			return $('<div>').addClass('text-center').append($wraper);
		}
		return '';
	}

	//为位置型传感器初始化地图
	function drawMap(map,dataArr){
		for(var i=0;i<dataArr.length;i++){
			var point = new BMap.Point(dataArr[i].lng,dataArr[i].lat);
			var marker = new BMap.Marker(point);
			map.addOverlay(marker);
		}
	}

	function drawChart($ele,dataArr,type,title){
		var xArr = new Array();
		var yArr = new Array();
		for(var i=0;i<dataArr.length;i++){
			xArr.push(dataArr[i].updateTime);
			yArr.push(parseFloat(type == "1" ? dataArr[i].val : type == "2" ? dataArr[i].switcher : 0));
		}
		$ele.highcharts({
			title:{
				text: title ? title + "曲线分布" : "曲线分布",
				x:-20
			},
	        xAxis: {
	            categories: xArr
	        },
	        yAxis: {
	            title: {
	                text: sensorUnitG
	            },
	            plotLines: [{
	                value: 0,
	                width: 1,
	                color: '#808080'
	            }]
	        },
	        tooltip: {
	            valueSuffix: sensorUnitG
	        },
	        series: [{
	            name: sensorNameG,
	            data: yArr
	        }]
		});
	}
    
    
    </script>
  </head>
  <body>
  	<input type="hidden" id="wsurl_his" value="ws://115.29.170.230:48686/tlink_websocket/chat/11135_16262_0"/>
  	<input type="hidden" id="wsurl_his1" value="ws://115.29.170.230:8086/tlink_websocket/chat/11135_16262_0"/>
  	<input type="hidden" id="wsurl_his2" value="ws://115.29.170.230:8087/tlink_websocket/chat/11135_16262_0"/>
  	<input type="hidden" id="basePath" value=""/>
     <div class="container-fluid index_header">
      <!--头部-->
       <div style="margin-top:20px;" class="index_c">
         <!--左侧栏-->
      <div class="history_div">
        <div class="history_left">
        <input type="hidden" id="sensorId" value="<%=@sensorId%>">
        <input type="hidden" id="sensorType" value="1">
           <!-- 线图开始 -->
             <%if @seobject.sensorType==1%>
             <iframe src="/goHistoryLine?sensorId=<%=@seobject.id%>&queryDate=1&uniy=K&type=1&name=温度" style="width:100%;height:400px;border:none;"></iframe>
             <%end%>
            
           <!-- 线图结束 -->
            <div class="col-sm-12 history_dataList">
                <div style="line-height:30px;font-size:16px;text-align:left;color:#333;" class="col-sm-1 pd0">数据列表</div>
                <div class="col-sm-11">
                <div class="col-sm-12 pd0">
                	<div class="col-sm-5 pd0">
                		<div class="input-group">
                            <span class="input-group-addon glyphicon glyphicon-list-alt" id="basic-addon1"></span>
                            <input type="text" readonly  name="reservation" id="reservation" class="form-control" placeholder="请选择时间" aria-describedby="basic-addon1" style="width: 80%;"/> 

                            <input type="hidden" name="startTime" id="startTime" value="" />
                 			<input type="hidden" name="endTime" id="endTime" value="" />
                        </div>
                	</div>
                	<div style="width:190px;" class="col-sm-4 pd0">
                		 <button  class="btn btn-default" id="sensorDataForm">
                        <i class="glyphicon glyphicon-search"></i>搜索
                    </button>
                    <button class="btn btn-default" style="display:none" onclick="download();">
                        <i class="glyphicon glyphicon-arrow-down"></i>导出数据
                    </button>
                	</div>
                    <div class="col-sm-1 pd0" style="display:none">
                    	 <input  type="text" name="faultDelay"  class="form-control" id="_faultDelay" value="" style="width:240px;"  placeholder="导出记录间隔时间（默认30秒/条）" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-sm-12 his_dataList_ta" id="historyDataTable">
                <table class="table table-bordered">
                  <tbody>
                   <tr class="table_header"><td>数据</td><td>更新时间</td></tr>
	              </tbody>
                 </table>
            </div>
            <div id="pagination" >
               
               
                	<div  style="color: red" align="center"> </div>
               
            </div>
        </div>
	        <div class="history_right">
	            <input type="hidden" id="uid" value="11135"/>
	            <input type="hidden" id="sensorNameG" value="温度"/>
	            <input type="hidden" id="sensorUnitG" value="K"/>
	            <input type="hidden" id="timeInterval" value="30"/>
	            <p class="history_p">传感器信息</p>
	            <p class="sen_value">
	              当前值：<span>
			              
				              
				              
				                 <small id="s_16262"><%=@seobject.value%></small><small><%=@seobject.sensorUnit%></small>
				              
			              
			          </span>
	            </p>
	            <p class="sen_infos">
	                设备名称：<span><%= @deobject.device_name%></span>
	            </p>
	            <p class="sen_infos">
	                传感器名称：<span><%=@seobject.name%></span>
	            </p>
	            <p class="sen_infos">
	                类型：<span>
                        数值型
                        
                        
                       </span>
	            </p>
	            <p class="sen_infos" style="display:none"> 
	                <!--（注：已连接class为 online   未连接：offline）-->
	                当前状态：<span class="offline" id="sz_16262">未连接</span>
	                   
	            </p>
	            <p class="sen_infos">
	                更新时间：<span id="st_16262">
                                        <%if @seobject.updatetime%>
			                <%=Time.at(@seobject.updatetime).strftime('%Y-%m-%d %H:%M:%S')%>
			                <%end%>
                                      </span>
	            </p>
	            <div class="col-sm-12 add_edit_btn">
	              
	            	<div style="margin-right:5px;display:none" class="col-sm-4 pd0" data-toggle="modal" data-target="#addAlarms">
	            		<button type="button" class="btn btn-block" onclick="addAlarms(3180);">添加触发器</button>
	            	</div>
	               	
	            	<div style="margin-right:5px;display:none" class="col-sm-4 pd0" >
	            		<button type="button" class="btn btn-block" onclick="updDevice(3180)">编辑设备</button>
	            	</div>
	            	<div>
	               		<button type="button" class="btn btn-default" data-dismiss="modal" >关 闭</button>

	            	</div>
	            </div>
	        </div>
    	</div>
    </div>
     <input type="hidden" id="active_" value="now" />
		<div class="modal fade" id="addAlarms">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="alarmsTitle"></h4>
		      </div>
		      <div class="modal-body" id="myBody">
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
    </div>
	<script type="text/javascript">
    $(document).ready(function() {
         $('#reservation').daterangepicker({
            timePickerIncrement: 30,
            format: 'YYYY-MM-DD',
         }, function(start, end, label) {
           
         });
         
         $("#_queryPage").find('li').click(function(){
				var index = $(this).data('index');		
				var startTime = $("#daterangepicker_start").val();
	    	    var endTime = $("#daterangepicker_end").val();
				loadTableData(index,startTime,endTime);
		  })
     });


	var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var day = d.getDate();
    if(month<10){
    	month="0"+month;
    }
    if(day<10){
    	day="0"+day;
    }
	var nowDate = year+"-"+month+"-"+day;
    var wsurlhis = $("#wsurl_his").val();
    var wsurlhis1 = $("#wsurl_his1").val();
    var wsurlhis2 = $("#wsurl_his2").val();
    var ws = new WebSocket(wsurlhis);
    var ws1 = new WebSocket(wsurlhis1);
    var ws2 = new WebSocket(wsurlhis2);
	ws.onopen = function(){
	};

	ws.onmessage = function(message){
	if(message.data != 'request_fail'){
    	var uid = $("#uid").val();
    	var sid = $("#sensorId").val();
    	var jsonObj = eval('('+message.data+')');
    	if(Number(uid) == Number(jsonObj.deviceUserid)){
    		var dataObj=eval(jsonObj.sensorsDates);  
   			for(var i=0;i<dataObj.length;i++){
   				var isline = dataObj[i].isLine;
   				var sensorsTypeId = dataObj[i].sensorsTypeId;
   				var updateTime = nowDate+" "+dataObj[i].times;
   				var val = dataObj[i].value;
   				var sensorId = dataObj[i].sensorsId;
   				if(Number(sensorId) == Number(sid)){
   					$("#sz_"+sensorId).html("已连接");
   					$("#st_"+sensorId).html(updateTime);
   					if('1' == sensorsTypeId){
	   					if(val != 'null' && val != ''){
	   						$("#s_"+sensorId).html(val);
	   					}
	   				}else if('2' == sensorsTypeId){
	   				    if('1' == dataObj[i].switcher){
	   				      $("#s_"+sensorId).html('<div class="infos_open_"></div>');
	   				   }else{
	   				      $("#s_"+sensorId).html('<div class="infos_close_"></div>');
	   				   }
	   				}else if('4' == sensorsTypeId){
	   				    $("#s_img"+sensorId).attr("src",dataObj[i].imgHex);
	   				    $("#_currentImg").attr("src",dataObj[i].imgHex);
	   				}
   					break;
   				}
   			}
    	}
    }
	};
	
	
	ws.onclose = function() {
	};
	
	
	ws1.onopen = function(){
	};

	ws1.onmessage = function(message){
	if(message.data != 'request_fail'){
    	var uid = $("#uid").val();
    	var sid = $("#sensorId").val();
    	var jsonObj = eval('('+message.data+')');
    	if(Number(uid) == Number(jsonObj.deviceUserid)){
    		var dataObj=eval(jsonObj.sensorsDates);  
   			for(var i=0;i<dataObj.length;i++){
   				var isline = dataObj[i].isLine;
   				var sensorsTypeId = dataObj[i].sensorsTypeId;
   				var updateTime = nowDate+" "+dataObj[i].times;
   				var val = dataObj[i].value;
   				var sensorId = dataObj[i].sensorsId;
   				if(Number(sensorId) == Number(sid)){
   					$("#sz_"+sensorId).html("已连接");
   					$("#st_"+sensorId).html(updateTime);
   					if('1' == sensorsTypeId){
	   					if(val != 'null' && val != ''){
	   						$("#s_"+sensorId).html(val);
	   					}
	   				}else if('2' == sensorsTypeId){
	   				    if('1' == dataObj[i].switcher){
	   				      $("#s_"+sensorId).html('<div class="infos_open_"></div>');
	   				   }else{
	   				      $("#s_"+sensorId).html('<div class="infos_close_"></div>');
	   				   }
	   				}else if('4' == sensorsTypeId){
	   				    $("#s_img"+sensorId).attr("src",dataObj[i].imgHex);
	   				    $("#_currentImg").attr("src",dataObj[i].imgHex);
	   				}
   					break;
   				}
   			}
    	}
    }
	};
	
	
	ws1.onclose = function() {
	};
	
	ws2.onopen = function(){
	};

	ws2.onmessage = function(message){
	if(message.data != 'request_fail'){
    	var uid = $("#uid").val();
    	var sid = $("#sensorId").val();
    	var jsonObj = eval('('+message.data+')');
    	if(Number(uid) == Number(jsonObj.deviceUserid)){
    		var dataObj=eval(jsonObj.sensorsDates);  
   			for(var i=0;i<dataObj.length;i++){
   				var isline = dataObj[i].isLine;
   				var sensorsTypeId = dataObj[i].sensorsTypeId;
   				var updateTime = nowDate+" "+dataObj[i].times;
   				var val = dataObj[i].value;
   				var sensorId = dataObj[i].sensorsId;
   				if(Number(sensorId) == Number(sid)){
   					$("#sz_"+sensorId).html("已连接");
   					$("#st_"+sensorId).html(updateTime);
   					if('1' == sensorsTypeId){
	   					if(val != 'null' && val != ''){
	   						$("#s_"+sensorId).html(val);
	   					}
	   				}else if('2' == sensorsTypeId){
	   				    if('1' == dataObj[i].switcher){
	   				      $("#s_"+sensorId).html('<div class="infos_open_"></div>');
	   				   }else{
	   				      $("#s_"+sensorId).html('<div class="infos_close_"></div>');
	   				   }
	   				}else if('4' == sensorsTypeId){
	   				    $("#s_img"+sensorId).attr("src",dataObj[i].imgHex);
	   				    $("#_currentImg").attr("src",dataObj[i].imgHex);
	   				}
   					break;
   				}
   			}
    	}
    }
	};
	
	ws2.onclose = function() {
	};
     function download(){
	   	var startTime = $("#daterangepicker_start").val();
	   	var endTime = $("#daterangepicker_end").val();
	   	var faultDelay = $("#_faultDelay").val();
	   	if(faultDelay == ''){
	   		faultDelay = "30";
	   	}
	   	location.href="/device/downloadSensorData.htm?sensorId="+$("#sensorId").val()+"&startTime="+startTime+"&endTime="+endTime+"&faultDelay="+faultDelay;
	  }
   
      function updDevice(deviceId){
         location.href = '/device/updateDevice.htm?deviceId=' + deviceId;
      }
     function addAlarms(deviceId){
          var title = '添加触发器';
          var src = '/alarms/toAddAlarms.htm?deviceId='+deviceId;
	      $.get(src, function(data){
	      	$("#alarmsTitle").html(title);
			$("#myBody").html(data);
		  }); 
	 }
	 
	 function attrImg(obj){
	    $("#_currentImg").attr("src",obj.src);
	 }
    </script>
  </body>
</html>

